<template>
    <section class="firmcontainer">
        <h4 class="testTitle">习近平同塞总统出席摔跤场项目移交</h4>
        <section class="examitem">
          <div class="examitemtitle">
            <p>单选题</p>
          </div>
          <div class="examcontent mui-card">
              <div class="flag0">标记<i class="icon-flag"></i></div>
              <div class="liscore">
                <span class="colorlightgrey"> ( 答对得1分 ) </span>
              </div>
              <div class="examrow">
                <div class="linum">
                  <span class="fontweightbold">1、</span>
                </div>
                <div class="licontent">博志成是谁?</div>
              </div>
              <div class="examrow text_info">
                <div class="linum">
                  <span class="fontweightbold">A、</span>
                </div>
                <div class="licontent">中国房地产行业综合解决方案提供商</div>
              </div>
              <div class="examrow text_info">
                <div class="linum">
                  <span class="fontweightbold">B、</span>
                </div>
                <div class="licontent">中国泛地产行业综合解决方案提供商</div>
              </div>
              <div class="examrow text_info">
                <div class="linum">
                  <span class="fontweightbold">C、</span>
                </div>
                <div class="licontent">房地产培训</div>
              </div>
              <div class="examrow text_info">
                <div class="linum">
                  <span class="fontweightbold">D、</span>
                </div>
                <div class="licontent">房地产咨询</div>
              </div>
              <div class="col-18 font-size-16">
                <label class="btn-check mb10 " data-questions="单选题" data-name="84" data-type="1000" data-value="A">
                  <i class="icon-circle-blank icon-check"></i>A
                </label>
                <label class="btn-check mb10 " data-questions="单选题" data-name="84" data-type="1000" data-value="B">
                  <i class="icon-circle-blank icon-check"></i>B
                </label>
                <label class="btn-check mb10 " data-questions="单选题" data-name="84" data-type="1000" data-value="C">
                  <i class="icon-circle-blank icon-check"></i>C
                </label>
                <label class="btn-check mb10 " data-questions="单选题" data-name="84" data-type="1000" data-value="D">
                  <i class="icon-circle-blank icon-check"></i>D
                </label>
              </div>
          </div>
        </section>
        <section class="examitem">
          <div class="examitemtitle">
            <p>多选题</p>
          </div>
          <div class="examcontent mui-card">
            <div class="flag0">标记<i class="icon-flag"></i></div>
            <div class="liscore">
              <span class="colorlightgrey"> ( 答对得1分 ) </span>
            </div>
            <div class="examrow">
              <div class="linum">
                <span class="fontweightbold">6、</span>
              </div>
              <div class="licontent">房地产增值税结构是什么</div>
            </div>
            <div class="examrow text_info">
              <div class="linum">
                <span class="fontweightbold">A、</span>
              </div>
              <div class="licontent">前期拿地，工程费</div>
            </div>
            <div class="examrow text_info">
              <div class="linum">
                <span class="fontweightbold">B、</span>
              </div>
              <div class="licontent">建安劳务</div>
            </div>
            <div class="examrow text_info">
              <div class="linum">
                <span class="fontweightbold">C、</span>
              </div>
              <div class="licontent">基础设施</div>
            </div>
            <div class="examrow text_info">
              <div class="linum">
                <span class="fontweightbold">D、</span>
              </div>
              <div class="licontent">利息费用</div>
            </div>
            <div class="col-18 font-size-16">
              <label class="btn-check mb10 " data-optionkey="A" data-questions="多选题" data-type="1000" data-name="1429" data-value="A">
                <i class="icon-check-empty"></i>A
              </label>
              <label class="btn-check mb10 " data-optionkey="B" data-questions="多选题" data-type="1000" data-name="1429" data-value="B">
                <i class="icon-check-empty"></i>B
              </label>
              <label class="btn-check mb10 " data-optionkey="C" data-questions="多选题" data-type="1000" data-name="1429" data-value="C">
                <i class="icon-check-empty"></i>C
              </label>
              <label class="btn-check mb10 " data-optionkey="D" data-questions="多选题" data-type="1000" data-name="1429" data-value="D">
                <i class="icon-check-empty"></i>D
              </label>
              <input type="hidden" name="check_val">
            </div>
          </div>
        </section>
        <section class="examitem">
          <div class="examitemtitle">
            <p>填空题</p>
          </div>
          <div class="examcontent mui-card">
            <div class="flag1">标记<i class="icon-flag"></i></div>
            <div class="examrow">
              <div class="linum">
                <span class="fontweightbold">4、</span>
              </div>
              <div class="licontent">[测试填空]___试卷</div>
            </div>
            <div class="optionBox">
              <div class="topic_input-out">
                <textarea class="input-textarea" cols="40" data-questions="填空题" data-name="20110" rows="5" placeholder="请将每个填空的答案用 ' ; ' 号隔开"></textarea>
                <span class="num-limit"><span class="js-pl-limit">0</span>/1000</span>
              </div>
            </div>
            <div class="ObjectiveQuestions">
              <div class="liscore">
                <span class="colorlightgrey"> ( 答对得5分 ) </span>
              </div>
            </div>
          </div>
        </section>
        <section class="examitem">
        <div class="examitemtitle">
          <p>问答题</p>
        </div>
        <div class="examcontent mui-card">
          <div class="flag1">标记<i class="icon-flag"></i></div>
          <div class="examrow">
            <div class="linum">
              <span class="fontweightbold">4、</span>
            </div>
            <div class="licontent">[测试问答]测试?</div>
          </div>
          <div class="optionBox">
            <div class="topic_input-out">
              <textarea class="input-textarea" cols="40" data-questions="填空题" data-name="20110" rows="5" placeholder=""></textarea>
              <span class="num-limit"><span class="js-pl-limit">0</span>/1000</span>
            </div>
          </div>
          <div class="ObjectiveQuestions">
            <div class="liscore">
              <span class="colorlightgrey"> ( 答对得5分 ) </span>
            </div>
          </div>
        </div>
      </section>
        <!--答题卡-->
        <div class="mui-popover mui-active">
          <div class="mui-popover-arrow" style="left:306px"></div>
          <div class="popover-conter">
            <div class="head">答题卡</div>
            <div class="questionsbody after">
              <div class="page after">
                <div class="mui-scroll-wrapper popconter">
                  <div class="FloatType "><a href="">1</a></div>
                  <div class="FloatType "><div class="FlagSelected"><a href=""></a></div><a href="">2</a></div>
                  <div class="FloatTypeSelected"><div class="FlagSelected"><a href="#"></a></div><a href="#">3</a></div>
                  <div class="FloatTypeSelected FloatTypeCurrent"><div  class="FlagSelected"><a href="#"></a></div><a href="#">4</a></div>
                </div>

              </div>
              <div class="clearstatic"></div>
              <div class="rowview">
                <span class="iconisnodone icon-circle-blank">&nbsp;&nbsp;未做</span>
                <span class="iconisdone icon-circle">&nbsp;&nbsp;已做</span>
                <span class="iconiscurrent icon-circle">&nbsp;&nbsp;当前</span>
                <span class="iconismark icon-flag">&nbsp;&nbsp;标记</span>
              </div>
              <div class="LableFont after" style="/* display: none; */">
                <span id="span_LostTime" class="lasttimeclock" style="/* display: none; */">&nbsp;</span>
                <!--以输入时间开始倒计时-->
                <span id="labRestTime" class="lasttimenumber" style="/* display: none; */">00:00:00</span>
                <input type="hidden" name="hidRestTime" id="hidRestTime" value="00:00:00">
              </div>
              <div class="text-center countinfo after">
                <span>共有</span>
                <span class="number1" id="ExamQuestionCount">3</span>
                <span>道题，已完成</span>
                <span class="number1" id="DoneExamQuestionCount">2</span>
                <span>道题</span>
                <div class="clearstatic"></div>
                <span>您还有</span><span class="number2" id="NoDoneExamQuestionCount">1</span><span>道题未完成</span>
              </div>
              <div class="pb20 text-center">
                <input type="button" name="btnSubmit" value="提交答卷" id="btnSubmit" class="btn-primary btn">
                <div id="dvLoading">正在处理，请稍候...</div>
              </div>
            </div>
          </div>
        </div>
    </section>
</template>
<script>
    export default {
        name: 'name',
        data () {
            return {}
        },
        methods: {}
    }
</script>
<style scoped>
.firmcontainer{
  width: 100%;
  display: block;
}
.testTitle{
  font-size: 14px;
  font-weight: 100;
  margin: 0;
  text-align: center;
  margin-bottom: 10px;
  color: white;
  background: #03A9F4;
  padding: 8px 10px;
}
.examitem {
  padding: 0 10px;
}
.examitem .examitemtitle p {
  height: 35px;
  font-weight: bolder;
  line-height: 35px;
  color: #03A9F4;
  font-size: 14px;
}
.mui-card {
  font-size: 14px;
  position: relative;
  overflow: hidden;
  margin: 10px;
  border-radius: 2px;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.examitem .examcontent {
  position: relative;
  border: #d5dfeb 1px solid;
  padding: 15px;
  background: #fff;
  margin: 5px auto;
}
div.flag0, div.flag1 {
  position: absolute;
  top: 18px;
  right: 5px;
  line-height: 18px;
  border-radius: 3px;
  width: 40px;
  height: 18px;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  z-index: 999;
}
div.flag0 {
  border: 1px solid silver;
  color: #999;
}
div.flag1 {
  border: 1px solid #ff9127;
  color: #ff9127;
  background-color: #FDEED7;
}
.examcontent .liscore {
  position: absolute;
  right: 10px;
  text-align: right;
  bottom: 20px;
  width: 130px;
}
.examcontent .liscore .colorlightgrey {
  color: #76c7fe;
  font-size: 9px;
}
.examcontent .examrow {
  clear: both;
  zoom: 1;
  margin-bottom: 10px;
  position: relative;
  padding-right: 140px;
  overflow: hidden;
}
.examitem .examcontent .examrow {
  clear: both;
  zoom: 1;
  margin-bottom: 10px;
  position: relative;
  padding-right: 0;
  overflow: hidden;
}
.examcontent .examrow .linum {
  float: left;
  font-size: 14px;
}
.examcontent .examrow .fontweightbold {
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  /*width: 5%;*/
  text-align: right;
  display: block;
}
.examitem .examcontent .examrow .licontent {
  padding: 0;
}
.examitem .examcontent .examrow .licontent {
  line-height: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 85%;
  float: left;
  word-break: break-all;
  font-size: 12px;
}
.examitem .examcontent .examrow .licontent {
  width: 82%;
}
.examitem .examcontent .examrow {
  clear: both;
  zoom: 1;
  margin-bottom: 10px;
  position: relative;
  padding-right: 0;
  overflow: hidden;
}
.examitem .examcontent .text_info {
  padding-left: 20px;
}
.examitem .examcontent .text_info {
  padding-bottom: 5px;
}
.col-18 {
  position: relative;
  width: 100%;
  float: left;
  padding: 0 15px;
  min-height: 1px;
}
.mb10 {
  margin-bottom: 10px;
}
label.btn-check {
  margin-right: 15px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.15);
  position: relative;
  height: 35px;
  line-height: 30px;
  border: solid 1px #ddd;
  padding: 4px 15px;
  width: 75px;
  color: #999;
  display: inline-block;
  font-size: 13px;
}
.btn-check i {
  position: relative;
  display: inline-block;
  font-size: 14px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.optionBox {
  margin-bottom: 20px;
}
.topic_input-out {
  margin: 5px 0 0 0;
  position: relative;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  height: 65px;
  overflow: hidden;
  padding: 5px 10px;
}
.input-textarea {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  display: block;
  font-size: 12px;
  border: none;
  background-color: #fff;
  resize: none;
  color: #666;
  padding: 0;
}
.topic_input-out .num-limit {
  position: absolute;
  line-height: 100%;
  font-size: 10px;
  right: 5px;
  bottom: 5px;
  color: #d0d6d9;
}
.js-pl-limit {
  font-size: 18px;
}
.mui-popover {
  position: absolute;
  z-index: 999;
  display: none;
  width: 280px;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
  opacity: 0;
  border-radius: 7px;
  background-color: #f7f7f7;
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
  box-shadow: 0 0 15px rgba(0,0,0,.1);
}
.mui-popover {
  width: 90%;
  min-height: 375px;
}
.mui-popover.mui-active {
  display: block;
  opacity: 1;
}
.mui-popover .mui-popover-arrow {
  position: absolute;
  z-index: 1000;
  top: -25px;
  left: 0;
  overflow: hidden;
  width: 26px;
  height: 26px;
}
.mui-popover .mui-popover-arrow:after {
  position: absolute;
  top: 19px;
  left: 0;
  width: 26px;
  height: 26px;
  content: ' ';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 3px;
  background: #f7f7f7;
}
.mui-popover .mui-popover-arrow:after {
  background: #03a9f4;
}
.popover-conter {
  margin: 0!important;
  width: 100%;
  min-height: 400px;
  display: block;
  overflow: hidden;
}
div.head {
  background: #03A9F4;
  width: 100%;
  height: 55px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 55px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
div.questionsbody {
  border-top: 0px;
  background-color: #fff;
  padding-bottom: 20px;
}
div.questionsbody .page {
  position: relative;
  max-height: 150px;
  min-height: 150px;
  overflow-y: auto;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: #333;
  background: #efeff4;
}
.mui-scroll-wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
}
.popconter {
  padding: 0 5px;
}
.mui-popover .mui-scroll-wrapper {
  margin: 7px 0;
  border-radius: 7px;
  background-clip: padding-box;
}
div.FloatType {
  overflow: hidden;
  background-color: #FFFFFF;
  float: left;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border: #CCCCCC 1px solid;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  color: #666666;
  margin: 0px 6px 6px 0px;
  position: relative;
}
div.FloatType a {
  color: #666666;
  font-size: 7px;
  text-decoration: none;
  cursor: pointer;
  display: block;
}
div.FlagSelected {
  position: absolute;
  bottom: -10px;
  right: -11px;
  width: 20px;
  height: 20px;
  background: url(http://mobile.dichanxuetang.com/images/icon.png)no-repeat;
}
div.FlagSelected a {
  width: 22px;
  height: 24px;
  display: block;
}
div.FloatTypeSelected {
  overflow: hidden;
  background-color: #4CCC39;
  float: left;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border: #ccc 1px solid;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  color: #333333;
  margin: 0px 6px 6px 0px;
  position: relative;
}
div.FloatTypeCurrent {
  background-color: #0099ff;
  float: left;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border: #0099ff 1px solid;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  margin: 0px 6px 6px 0px;
  position: relative;
}
div.FloatTypeSelected a {
  color: #fff;
  font-size: 12px;
}
.clearstatic {
  clear: both;
  line-height: 1px;
  font-size: 1px;
  padding: 0px;
  border: 0px;
}
div.questionsbody .rowview {
  padding: 10px 0px 10px 0px;
  text-align: center;
}
div.questionsbody .rowview span {
  padding: 0px 8px 2px 8px;
  position: relative;
  font-size: 12px;
  font-weight: bold;
}
div.questionsbody .rowview span.iconisnodone {
  color: #666;
}
div.questionsbody .rowview span.iconisdone {
  color: #4CCC39;
}
div.questionsbody .rowview span.iconiscurrent {
  color: #0099ff;
}
div.questionsbody .rowview span.iconismark {
  color: #ff9127;
}
div.LableFont {
  position: relative;
  background-color: #fff;
  height: 51px;
}
div.LableFont .lasttimeclock {
  position: absolute;
  width: 85px;
  height: 57px;
  display: block;
  background: url(http://mobile.dichanxuetang.com/images/naozhong.png)right bottom no-repeat;
  background-size: 55px 60px;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform-origin: 65% 50%;
  -ms-transform-origin: 65% 50%;
  -webkit-transform-origin: 65% 50%;
  -o-transform-origin: 65% 50%;
  -moz-transform-origin: 65% 50%;
}
.lasttimenumber {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  font-family: Arial;
  line-height: 57px;
}
.earlywarning {
  animation: earlywarning .2s linear infinite;
  -moz-animation: earlywarning .2s linear infinite;
  -webkit-animation: earlywarning .2s linear infinite;
  -o-animation: earlywarning .2s linear infinite;
}
@keyframes earlywarning {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-4deg)
  }

  50% {
    transform: rotate(4deg)
  }

  75% {
    transform: rotate(-4deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

@-moz-keyframes earlywarning {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-4deg)
  }

  50% {
    transform: rotate(4deg)
  }

  75% {
    transform: rotate(-4deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

@-webkit-keyframes earlywarning {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-4deg)
  }

  50% {
    transform: rotate(4deg)
  }

  75% {
    transform: rotate(-4deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

@-o-keyframes earlywarning {
  0% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(-4deg)
  }

  50% {
    transform: rotate(4deg)
  }

  75% {
    transform: rotate(-4deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

.lasttimenumber {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  font-family: Arial;
  line-height: 57px;
}
.colorf00 {
  color: #f00;
  text-shadow: 0 0 0 #f00;
  animation: textshadow 2s linear infinite;
  -moz-animation: textshadow 2s linear infinite;
  -webkit-animation: textshadow 2s linear infinite;
  -o-animation: textshadow 2s linear infinite;
}

@keyframes textshadow {
  0% {
    text-shadow: 0 0 0 #f00;
  }

  25% {
    text-shadow: 0 0 5px #f00;
  }

  50% {
    text-shadow: 0 0 0 #f00;
  }

  75% {
    text-shadow: 0 0 5px #f00;
  }

  100% {
    text-shadow: 0 0 0 #f00;
  }
}

@-moz-keyframes textshadow {
  0% {
    text-shadow: 0 0 0 #f00;
  }

  25% {
    text-shadow: 0 0 5px #f00;
  }

  50% {
    text-shadow: 0 0 0 #f00;
  }

  75% {
    text-shadow: 0 0 5px #f00;
  }

  100% {
    text-shadow: 0 0 0 #f00;
  }
}

@-webkit-keyframes textshadow {
  0% {
    text-shadow: 0 0 0 #f00;
  }

  25% {
    text-shadow: 0 0 5px #f00;
  }

  50% {
    text-shadow: 0 0 0 #f00;
  }

  75% {
    text-shadow: 0 0 5px #f00;
  }

  100% {
    text-shadow: 0 0 0 #f00;
  }
}

@-o-keyframes textshadow {
  0% {
    text-shadow: 0 0 0 #f00;
  }

  25% {
    text-shadow: 0 0 5px #f00;
  }

  50% {
    text-shadow: 0 0 0 #f00;
  }

  75% {
    text-shadow: 0 0 5px #f00;
  }

  100% {
    text-shadow: 0 0 0 #f00;
  }
}
.countinfo {
  text-align: center;
  color: #666666;
  line-height: 28px;
  margin-top: 15px;
  font-size: 14px;
}
.text-center {
  text-align: center;
}
.countinfo .number1 {
  font-size: 16px;
  color: #333333;
  font-family: Tahoma;
  font-weight: bold;
  padding: 0px 5px;
  margin-top: 1px;
}
.clearstatic {
  clear: both;
  line-height: 1px;
  font-size: 1px;
  padding: 0px;
  border: 0px;
}
.countinfo .number2 {
  font-size: 16px;
  color: #CC0000;
  font-family: Tahoma;
  font-weight: bold;
  padding: 0px 5px;
  margin-top: 1px;
}
.pb20 {
  padding-bottom: 20px;
}
#btnSubmit {
  color: #fff;
  border-radius: 0;
  padding: 5px 25px;
  margin: 5px 0;
  background-color: #03a9f4;
  border: none;
}
#dvLoading {
  margin: 5px 0;
  font-size: 22px;
  font-weight: bold;
  color: #CC0000;
  display: none;
}

</style>
